import React, { Component } from 'react'
import './UserPass.scss'
import { Toast } from 'antd-mobile'
import axios from 'axios'
export default class UserPass extends Component {
  state = {
    user: "",
    pass: "",
  }
  //返回上一步
  goToPrev = (params) => {
    this.props.history.go(-1)
  }
  //账户
  userChange = (e) => {
    this.setState({
      user: e.target.value
    })
  }
  //密码
  passChange = (e) => {
    this.setState({
      pass: e.target.value
    })
  }
  //删除账号内容
  deleteUserVal = () => {
    this.setState({
      user: ""
    })
  }
  //删除密码内容
  deletePassVal = () => {
    this.setState({
      pass: ""
    })
  }
  //登录
  handleClickLogin = (params) => {
    let { user, pass } = this.state
    if (user === "" || pass === "") {
      Toast.info("请认真填写信息", 1)
    } else {
      axios.post("http://s.linweiqin.com/api/s/loginCheck", {
        username: user,
        password: pass,
      }).then(res => {
        if (res.data.msg === "登录成功") {
          Toast.info("登录成功！", 1, () => {
            this.props.history.push('/')
          })
        } else {
          Toast.info("账号或密码错误", 1)
        }
      }).catch((err) => {
        Toast.info("出错啦！", 1)
      })
    }
  }

  render() {
    let { user, pass } = this.state

    return (
      <div className='mgUserPass'>
        <div className='mgUserPassNav'>
          <div className='Nav-left'>
            <i onClick={this.goToPrev} className='iconfont icon-icon'></i>
          </div>
          <div className='Nav-center'>
            账号登录
           </div>
          <div className='Nav-right'></div>
        </div>
        <div className='mgUserPassMain'>
          <div className='MainAccount'>
            <input type="text"
              value={user}
              onChange={this.userChange}
              placeholder='手机号/邮箱/用户名' />
            {
              user === "" ? "" : <i onClick={this.deleteUserVal} className='iconfont icon-cha'></i>
            }
          </div>
          <div className='MainPassword'>
            <input type="password"
              value={pass}
              onChange={this.passChange}
              placeholder='密码' />
            {
              pass === "" ? "" : <i onClick={this.deletePassVal} className='iconfont icon-cha'></i>
            }
          </div>
          <div onClick={this.handleClickLogin} className='MainLogin'>
            登录
            </div>
        </div>
        <p>
          <a className='a-left' href="/#/register">注册账号</a>
          <a className='a-right' href="/#/forget">忘记密码</a>
        </p>
      </div>
    )
  }
}
